<template>
    <div>
        <h1>注册页面</h1>
        <table>
            <tr>
                <td>姓名</td>
                <td>
                   <input type="text" v-model="state.mname" />
                </td>
            </tr>
            <tr>
                <td>电话</td>
                <td>
                    <input type="text" v-model="state.mphone" />
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="funimage">
                    <img :src="src" alt="" height="50px" width="50px" v-if="src!=''">
                </td>
            </tr>
            <tr>
                <td>时间</td>
                <td>
                    <input type="date" v-model="state.mdateTime" />
                </td>
            </tr>
            <tr>
                <td>类型</td>
                <td>
                    <input type="text" v-model="state.mleixin" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="添加" @click="tianjia"/>
                </td>
              
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted} from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()

const date = reactive({
  state:{
    mname:'',
    mphone:'',
    mPhoto:'',
    mdateTime:'',
    mleixin:'',
  },
  src:''
})

const {state,src} = toRefs(date)

const funimage = (e:any)=>{
    let file = e.target.files[0]
    let from = new FormData()
    from.append('file',file)
    axios({
        url:'https://localhost:7246/api/Photo/PostPhotoMember',
        method:'post',
        data:from
    })
    .then((res)=>{
        src.value = 'https://localhost:7246' + res.data.fileName
        state.value.mPhoto = res.data.fileName
    })
    .catch((err)=>{
        console.log(err)
    })
}


const tianjia = () => {
    if(state.value.mname==""){
        alert("名称不能为空")
        return
    }
    if(state.value.mphone==""){
        alert("电话不能为空")
        return
    }
    if(state.value.mdateTime==""){
        alert("时间不能为空")
        return
    }
    if(state.value.mleixin==""){
        alert("类型不能为空")
        return
    }
    console.log(state.value);
    axios({
        url:'https://localhost:7246/api/Login/AddMember',
        method:'post',
        data:state.value

    }).then((res)=>{
        console.log(res)
        if(res.data.data>0){
            alert("成功")
            router.push('MemberShow')
        }
        else
        {
            alert("失败")
        }
    })
    .catch((err)=>{
        console.log(err)
    })
}


</script>

<style scoped>

</style>